<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>复诊记录</title>
    <!-- 引入样式文件 -->
    <link rel="stylesheet" href="../../common/css/vant-index.css" />
    <link rel="stylesheet" href="../css/monitor.css">

    <!-- 引入 Vue 和 Vant 的 JS 文件 -->
    <script src="../../common/js/vue.min.js"></script>
    <script src="../../common/js/axios.min.js"></script><script src="../../base.js"></script>
    <script src="../../common/js/vue.global.prod.js"></script>
    <!-- 引入 viewer 图片预览样式文件 -->
    <link href="../../common/css/viewer.css" rel="stylesheet" />
    <style>
        .follow_time {
            margin-right: 16px;
            font-size: 14px;
            color: rgba(0, 0, 0, 0.85);
        }

        .follow_organization {
            margin-top: 10px;
        }


        .text {
            font-size: 12px;
            color: rgba(0, 0, 0, 0.65);
        }
    </style>

</head>

<body>
    <div id="app" v-cloak>
        <div>
            <van-list v-if="nothing==1" v-model="loading" :finished="finished" finished-text="没有更多了">
				<van-cell center v-for="item in list" :key="item">
                		<div @click="getId(item.flupAppointmentId,item.flupStatus)">
                			<span class=" follow_time">复诊时间：{{item.flupDate}}</span>
						<van-tag color="rgba(245, 245, 245, 1)" text-color="rgba(153, 153, 153, 1)" v-if="item.flupStatus==3">未复诊</van-tag>
						<van-tag color="rgba(245, 245, 245, 1)" text-color="rgba(153, 153, 153, 1)" v-if="item.flupStatus==2">已复诊</van-tag>
						<van-tag color="#7232dd" v-if="item.flupStatus==0">未预约</van-tag>
						<van-tag type="danger" v-if="item.flupStatus==1">待复诊</van-tag>
						<van-tag type="danger" v-if="item.flupStatus==4">复诊中</van-tag>
						<van-tag type="success" v-if="item.flupStatus==5">已预约</van-tag>
						<!--<p class="follow_organization text">服务机构：{{item.organization}}</p>-->
						<p class="text">责任医师：{{item.doctorName}}</p>
                		</div>
                	</van-cell>
			</van-list>
            <div v-if="nothing==2" class="none_info">
                <img src="../img/bloodprofile/none.png" />
                <p style="font-size: 12px;color: rgba(0, 0, 0, 0.45);">当前没有复诊记录哦～</p>
            </div>

        </div>
    </div>
</body>
<!-- viewer 图片预览 -->
<script src="../../common/js/vant.min.js"></script>
<script src="../../common/js/viewer.js"></script>
<script src="../../common/js/index.umd.js"></script>
<script src="../../common/js/url.min.js"></script>
<script type="module">

    import {
        getAction,
        postAction,
        getUrl,
    } from "../../common/js/api/vue3-axios-utils.js";

    const app = Vue.createApp({

        data() {
            return {
                url: {
                    getfollowList: "/flup/patient/page",
                },

                show: false,
                totalPage: 0,
                nothing: 1,
                minDate: new Date(2020, 0, 1),
                maxDate: new Date(2025, 10, 1),
                currentDate: new Date(),
                list: [],
                period: 2,
                asd: '',
                date: '',
                loading: false,
                finished: false,
            }
        },
        methods: {
            getId(id,status) {
            		if(status==2||status==1||status==4){
            			localStorage.setItem("flupAppointmentId", id);
            			window.location.href = 'notVisitRecord.html?userid=' + this.pid+'&flupid='+id
            		}else if(status==3){
            			this.$toast({
            				message:'未完成本次复诊'
            			})
            		}
            	},
            showPopup() {
                this.show = true
            },
            formatter(type, val) {
                if (type === 'year') {
                    return `${val}年`;
                } else if (type === 'month') {
                    return `${val}月`;
                }

                return val;
            },

            onConfirm(val) {
                var d = new Date(val);
                var y = d.getFullYear()
                var m = d.getMonth() + 1
                m = m < 10 ? ('0' + m) : m
                const time = y + '-' + m;
                this.date = time
                const timevalue = y + '年' + m + '月';
                console.log(time);
                this.show = false
                this.getfollowList()
            },
            async getfollowList() {


                let params = {
                    // 患者 ID 从本地存储空间的 pid 获得
                    patientId: this.pid
                };
                let url = getUrl() + this.url.getfollowList;
                const res = await getAction(url, params);
                if (res.data.success) {
                    if (res.data.result.records && res.data.result.pages !== 0) {
                        this.nothing = 1
                        this.list = JSON.parse(JSON.stringify(res.data.result.records));


                        console.log(this.list);
                    } else {
                        this.nothing = 2



                    }
                }
            },
        },

        created() {
        		this.pid = url('?userid')
            this.getfollowList()
        },
    });
    app.use(vant);


    app.use(vant.Lazyload);
    app.use(VueViewer.default);

    app.mount('#app');
</script>

</html>